import { useOrganizations } from '@/services/org';
import { useTeachers } from '@/services/teacher';
import { IValue } from '@/utils/types';
import { Select } from 'antd';
import _ from 'lodash';

/**
* 教师选择器
*/
interface IProps {
  value?: IValue[];
  onChange?: (val: IValue[]) => void;
}
interface TeacherItem {
  name:string,
  id:string
}
const TeacherSelect = ({
  value,
  onChange,
}:IProps) => {
  const { data, refetch } = useTeachers(1, 10);
  const onSearch = _.debounce((name:string) => {
    refetch({
      name,
    });
  }, 500);
  const onChangeHandler = (val:IValue[]) => {
    onChange?.(val);
  };
  return (
    <div>
      <Select
        showSearch
        placeholder="请选择老师"
        style={{ width: '100%' }}
        mode="multiple"
        onSearch={onSearch}
        filterOption={false}
        onChange={onChangeHandler}
        labelInValue
        clearIcon
        value={value}
      >
        {
            data?.map((item:TeacherItem) => (
              <Select.Option
                key={item.id}
                value={item.id}
              >
                { item.name }
              </Select.Option>
            ))
        }
      </Select>
    </div>
  );
};

TeacherSelect.defaultProps = {
  value: [],
  onChange: () => {},
};

export default TeacherSelect;
